import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet,
} from 'react-native';

import * as Const from './../../const';

import * as Animated from 'react-native-animatable';

interface Props {
    color:string,
    size:number
}

class LoadingContent extends PureComponent<Props> {

    static defaultProps = {
        size: 240,
        color: Const.color
    }

    get animation() {
        return {
            0: {
                opacity: 1,
                scale: .5
            },
            1: {
                opacity: .1,
                scale: 1
            }
        }
    }

    get containerStyle() {
        const {
            size
        } = this.props;
        return {
            width: size,
            height: size
        }
    }

    get loadingStyle() {
        const {
            size,
            color
        } = this.props;
        const contentSize = size / 2;
        return {
            width: contentSize,
            height: contentSize,
            backgroundColor: color,
            borderRadius: contentSize / 2
        }
    }

    get aniContentStyle() {
        const {
            size,
            color
        } = this.props;
        return {
            width: size,
            height: size,
            opacity: 1,
            transform: [{scale: .5}],
            borderRadius: size / 2,
            backgroundColor: color
        }
    }

    render() {
        return (
           <View>
               <View style={styles.containerStyle}>
                   <View style={styles.position}>
                       <Animated.View
                           easing="ease-out"
                           iterationDelay={0}
                           iterationCount="infinite"
                           animation={this.animation}
                           style={this.aniContentStyle}
                       />
                   </View>
                   <View style={styles.position}>
                       <View style={this.loadingStyle} />
                   </View>
               </View>
           </View>
        )
    }
}

const styles = StyleSheet.create({
    position: {
        left: 0,
        top: 0,
        bottom:0,
        right:0,
        position: `absolute`,
        alignItems: `center`,
        justifyContent: `center`,
    }
}) as any;

export default LoadingContent;